<template>
  <dt-modal-edit ref="editRef" title="编辑项目备注" @ok="onOk" @cancelData="cancelData">
    <div class="topBox">
      <span>
        <Icon style="vertical-align: -8px" size="30" color="#2D61F4" type="ios-list-box-outline" />
        {{ editInfo.tenantName }}（编号：{{ editInfo.tenantCode }}）- {{ editInfo.tenantStatusName }}
      </span>
    </div>
    <div>
      <h3 class="title">项目备注</h3>
      <Input
        v-model="editInfo.remark"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入说明..." />
    </div>
  </dt-modal-edit>
</template>

<script setup>
  import { ref } from 'vue'
  import dt from '@dt/dt'
  import apiMgr from '../biz/index.js'
  const editInfo = ref({
    remark: ''
  })
  const emits = defineEmits(['successful'])
  const onOk = () => {
    let params = {
      tenantId: editInfo.value.id,
      remark: editInfo.value.remark,
      changeType: 11
    }
    apiMgr.changeTenantForWeb(params).then((res) => {
      emits('successful')
      dt.ui.Message.success('项目备注编辑成功')
    })
  }

  const editRef = ref()
  const cancelData = () => {
    editInfo.value = {
      remark: ''
    }
  }
  const hide = () => editRef.value.hide()
  const show = (val) => {
    console.log(val, 'bb')
    editInfo.value = dt.tool.deepClone(val)
    editRef.value.show()
  }
  defineExpose({
    show,
    hide
  })
</script>

<style lang="scss" scoped>
  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #ccc solid;
    background: #f7f4f4;
    padding: 20px 20px;
    line-height: 30px;
    font-size: 16px;
  }
  .title {
    position: relative;
    padding-left: 16px;
    margin: 10px 0;
  }
  .title::before {
    content: '';
    width: 8px;
    height: 16px;
    background: #2d61f4;
    position: absolute;
    left: 0;
    top: 4px;
  }
</style>
